<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>声明式函数 VS 赋值式函数</title>
  </head>
  <body>
    <!-- 
    JS解释器在执行JS脚本之前先进行【预解析】
    目的是为所有变量预先开辟内存空间
    对于【声明式函数】 开辟空间+填充代码 => 执行之初即可立即调用该函数
    对于【赋值式函数】 开启空间+填充undefined => 执行之初【赋值式函数】fn2的内存空间存在但值是undefined(报错fn2不是一个function/而是一个undefined)
    ------------------------------------------------------------------------
    在脚本的【执行阶段】读一行 执行一行
     -->
    <script>
      // 预编译阶段 先为变量a分配内存空间 填充undefined
      console.log(a);

      // 代码执行到此处时 才会给a填充123
      var a = 123;

      // fn1声明前是一个function
      //   console.log(typeof fn1);
      //   fn1()

      //   function fn1() {
      //     console.log("哥是声明式函数fn1");
      //     return 123;
      //   }

      // fn1声明后是一个function
      //   console.log(typeof fn1);
      // fn1()

      // fn2声明前是一个undefined
      //   console.log(typeof fn2); //undefined
      //   fn2()

      // fn2当做一个普通变量处理：预编译阶段先分配内存+填充undefined
      //   代码执行到此处时 才会给fn2赋值为一个函数
      //   var fn2 = function () {
      //     console.log("哥是赋值式函数fn2");
      //     return 123;
      //   };
      // fn2声明后是一个function
      // console.log(typeof fn2); //function
      // fn2()
    </script>
  </body>
</html>
